<!--
    watch - 侦听器
    五种情况
 -->
<script setup>
import {ref, watch} from "vue";

const count = ref(0)
const nickName = ref('张三')

const changeCount = () => {
    count.value++
}
const changeNickName = () => {
    nickName.value = '李四'
}

// 1.监视单个数据的变化
// watch(ref对象,(newValue, oldValue)=>{})
watch(count, (newValue, oldValue) => {
    console.log(newValue, oldValue)
})
// 2.监视多个数据的变化
watch([count, nickName], (newArr, oldArr) => {
    console.log(newArr, oldArr)
})
// 3.immediate 立刻执行
watch(count, (newValue, oldValue) => {
    console.log(newValue, oldValue)
}, {
    immediate: true
})
// 4.deep 深度监视
const userInfo = ref({
    name: '陆兆祥',
    age: 18
})
const setUserAge = () => {
    userInfo.value.age++
}
watch(userInfo, (newValue) => {
    console.log('深度监听函数执行了...', newValue)
}, {
    deep: true
})
// 5.精确监听对象中的某个值
const setUserName = () => {
    userInfo.value.name = '李四'
}
watch(
    () => userInfo.value.age,
    (newValue, oldValue) => {
        console.log('精准监听函数执行了...', newValue, oldValue)
    }
)
</script>

<template>
    <h3 style="text-align: center;">Vue3-Study</h3>
    <hr>
    <div>{{ count }}</div>
    <button @click="changeCount">改数字</button>
    <div>{{ nickName }}</div>
    <button @click="changeNickName">改昵称</button>
    <div>-----------------</div>
    <div>{{ userInfo }}</div>
    <button @click="setUserAge">修改UserAge</button>
    <button @click="setUserName">修改UserName</button>
</template>